Gauge এবং Progress Charts Google Charts এর দুটি অত্যন্ত কার্যকরী ভিজ্যুয়ালাইজেশন টুল, যা সাধারণত দ্রুত অগ্রগতি, পারফরম্যান্স, বা সেট গোল এর ট্র্যাকিংয়ের জন্য ব্যবহৃত হয়। এই চার্টগুলোর মাধ্যমে আপনি বিভিন্ন পারফরম্যান্স মেট্রিক, যেমন সেলস টার্গেট, কাজের অগ্রগতি, বা স্ট্যাটাস আপডেট ইত্যাদি স্পষ্টভাবে উপস্থাপন করতে পারেন।
এখানে আমরা Gauge এবং Progress Charts এর Advanced Customization নিয়ে আলোচনা করব, যাতে আপনি এসব চার্টের মধ্যে রঙ, সীমা, লেবেল, অ্যানিমেশন এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে পারেন।
১. Gauge Chart Advanced Customization
Gauge Chart সাধারণত একটি নির্দিষ্ট মানের সাথে সম্পর্কিত অগ্রগতি বা পারফরম্যান্স প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি রিং বা আর্কের মত দেখায়, যেখানে একটি সূচক বা পয়েন্ট আপনি কোথায় দাঁড়াচ্ছেন তা দেখায়।
Gauge Chart কাস্টমাইজেশনের উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Gauge Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
greenFrom: 0, greenTo: 75,
minorTicks: 5,
max: 100,
min: 0,
majorTicks: ['0', '20', '40', '60', '80', '100'],
minorTicks: 5,
animation: {
duration: 1000,
easing: 'out'
},
greenColor: '#4CAF50',
yellowColor: '#FFEB3B',
redColor: '#F44336'
};
var chart = new google.visualization.Gauge(document.getElementById('gauge_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Gauge Chart Example</h2>
<div id="gauge_chart" style="width: 400px; height: 120px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Gauge Chart অপশন কাস্টমাইজেশন:
redFrom,yellowFrom, এবংgreenFromঅপশনগুলি রঙের সীমানা নির্ধারণ করে, যেখানে আপনি প্রতিটি সেকশনের জন্য সর্বোচ্চ এবং সর্বনিম্ন মান নির্ধারণ করতে পারেন।majorTicksএবংminorTicksব্যবহার করে আপনি মূল এবং ছোট টিক মার্কস কাস্টমাইজ করতে পারেন।animationঅপশন দিয়ে অ্যানিমেশন যুক্ত করা হয়েছে, যা চার্টটি সুন্দরভাবে লোড হতে সহায়ক।greenColor,yellowColor, এবংredColorঅপশনগুলি দিয়ে আমরা চার্টের রঙ কাস্টমাইজ করেছি।
- Customizing Labels and Colors:
majorTicksএর মাধ্যমে আপনি গেজের বিভিন্ন বিভাগের লেবেল কাস্টমাইজ করতে পারেন।
২. Progress Chart Advanced Customization
Progress Chart বা Bar Progress Chart মূলত কাজের অগ্রগতি বা সম্পন্নের স্তর প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত রঙিন বার আকারে কাজের অগ্রগতি প্রকাশ করে।
Progress Chart কাস্টমাইজেশনের উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Progress Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Progress', { role: 'style' }],
['Task 1', 60, 'color: green'],
['Task 2', 80, 'color: orange'],
['Task 3', 40, 'color: red'],
['Task 4', 90, 'color: blue']
]);
var options = {
title: 'Progress of Tasks',
chartArea: {width: '50%'},
hAxis: {
title: 'Progress',
minValue: 0
},
vAxis: {
title: 'Tasks'
},
animation: {
startup: true,
duration: 1500,
easing: 'out'
}
};
var chart = new google.visualization.BarChart(document.getElementById('progress_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Progress Chart Example</h2>
<div id="progress_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Progress Chart অপশন কাস্টমাইজেশন:
color: প্রতিটি টাস্কের জন্য একটি ভিন্ন রঙ নির্ধারণ করা হয়েছে (যেমন:green,orange,redএবংblue).animation: গেজ বা প্রোগ্রেস বারটি সুন্দরভাবে রেন্ডার করার জন্য অ্যানিমেশন যুক্ত করা হয়েছে।hAxisএবংvAxis: প্রোগ্রেস বারটির অনুভূমিক (horizontal) এবং উল্লম্ব (vertical) অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে।
- Customizing Progress Bar: প্রতিটি টাস্কের অগ্রগতির জন্য নির্দিষ্ট রঙ ব্যবহার করা হয়েছে, যা ব্যবহারকারীর কাছে আরও বোঝার সুবিধা দেয়।
৩. Advanced Customization Options
- Interactive Features:
- Tooltips: আপনি প্রতিটি বার বা গেজে টুলটিপ যোগ করতে পারেন, যাতে ব্যবহারকারীরা ক্লিক বা হোভার করার মাধ্যমে আরও তথ্য দেখতে পারে।
- Hover Effects:
hoverইভেন্ট ব্যবহার করে বিভিন্ন টাস্ক বা ডেটা পয়েন্টে মাউসের উপর হোভার করলে সেগুলোর স্টাইল পরিবর্তন করতে পারেন।
- Dynamic Data: Google Charts-এ Dynamic Data যোগ করতে, আপনি API থেকে ডেটা লোড করে সেই ডেটার উপর ভিত্তি করে চার্ট তৈরি করতে পারেন।
- Real-time Updates: আপনার Progress Chart বা Gauge Chart তে রিয়েল-টাইম ডেটা আপডেট করার জন্য JavaScript setInterval() ফাংশন ব্যবহার করতে পারেন, যা নির্দিষ্ট সময় পর পর চার্ট রিফ্রেশ করবে।
- Custom Animations: Google Charts সাপোর্ট করে custom animations যা আপনি আপনার চার্টের জন্য সেট করতে পারেন, যেমন ধীরে ধীরে আকার পরিবর্তন বা ট্রানজিশন ইফেক্ট।
উপসংহার
Google Charts এর Gauge এবং Progress Charts আপনাকে আপনার ডেটার ভিজ্যুয়াল উপস্থাপনা অত্যন্ত কাস্টমাইজ করতে সহায়ক। এগুলোর advanced customization দিয়ে আপনি চার্টের রঙ, অ্যানিমেশন, লেবেল এবং ডেটার উপস্থাপনাকে আরও কার্যকর এবং আকর্ষণীয় করে তুলতে পারেন। এটি ব্যবহারকারীর অভিজ্ঞতা এবং তথ্যের পরিষ্কারতা বাড়ায়, যা সিদ্ধান্ত গ্রহণের প্রক্রিয়া সহজ করে তোলে।
Read more
